<template>
  <view :class="theme">
    <view class="main">
      <view>
        <view class="fd-row jc-sb ai-center">
          <text class="fs-28">买入单价（CNY）</text>
          <text class="color-27">
            指导价格：{{ tradeInfo.refer_price || 0 }}CNY
          </text>
        </view>

        <input v-model="formData.price" class="bg-21 height-88 mt-30 br-10 pl-20 pr-20 text-center fs-28"
          type="digit" placeholder="请输入购买单价" />
      </view>

      <view class="mt-60">
        <view class="fd-row jc-sb">
          <text class="fs-28">买入数量（星核）</text>
          <!-- <text class="color-9">最低数量{{ tradeInfo.min_num || 1 }}个</text> -->
        </view>

        <view @click="showPopup.number = true" class="bg-21 fd-row mt-30 br-10">
          <input v-model="formData.number" disabled class="f1 bg-21 height-88 ml-88 pl-20 pr-20 text-center fs-28"
            type="number" placeholder="请输入购买数量" />
          <view hover-class="tap-hover" class="width-88 height-88 jc-center ai-center">
            <u-icon name="arrow-down" size="40" :color="$config.COLOR_10" />
          </view>
        </view>
      </view>

      <checkbox-group @change="changePayOption" class="mt-60">
        <label class="fs-28">付款方式</label>
        <label class="mt-40 fd-row ai-center" v-for="option in payOptions" :key="option.key">
          <u-image width="50" height="50" :src="`/static/img/otc/icon-${option.key}.png`" />
          <text class="f1 ml-20 fs-28 color-9">{{ option.text }}</text>
          <checkbox :value="String(option.value)" :color="$config.COLOR_2" />
        </label>
      </checkbox-group>
    </view>
    <view class="footer bg-21">
      <button @click="publishTrade" hover-class="tap-hover" class="fs-36 fw-700 br-50 color-2 bg-23"
        style="line-height: 44px; margin: 16px 50rpx;">
        发布交易
      </button>
    </view>

    <u-modal @confirm="closeStatement" v-model="showPopup.statement" @input="changePopup($event, 'statement')"
      :showCancelButton="false" :cancel-color="$config.COLOR_9" :confirm-color="$config.COLOR_10" title="重要声明"
      content="上传假交易截图的用户，将被永久封禁，不予解封！" />

    <u-select v-model="showPopup.number" @confirm="confirmNumber" @input="changePopup($event, 'number')" title="选择买入数量"
      :cancel-color="$config.COLOR_9" :default-value="defaultSelector" value-name="value" label-name="value"
      :confirm-color="$config.COLOR_10" :list="numberRange" />
  </view>
</template>

<script lang="ts" setup>

import { useMapState } from "@/common/libs/store";
import { debounce, sleep } from "@/common/libs/utils";
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";

const { theme } = useMapState(["theme"]);
const { $config = {} } = getApp().globalData || {};

const payOptions = [
  {
    key: "aliPay",
    text: "支付宝",
    value: 1
  },
  {
    key: "weChat",
    text: "微信",
    value: 2
  },
  {
    key: "bankCard",
    text: "银行卡",
    value: 3
  },
  {
    key: "usdt",
    text: "USDT",
    value: 4
  },
];


const defaultSelector = ref([0]);
const numberRange = [
  {
    value: 2
  },
  {
    value: 10
  },
  {
    value: 50
  },
  {
    value: 100
  },
  {
    value: 200
  },
  {
    value: 500
  }
];

const formData = reactive({
  price: "",
  number: String(numberRange[defaultSelector.value[0]].value),
  payOptions: "",
});

const tradeInfo = ref<AnyObject>({});
const showPopup = reactive({
  statement: false,
  number: false,
});


onLoad(() => {
  uni.getStorage({
    key: "showStatement",
    success(data: any) {
      showPopup.statement = (data === undefined ? true : data);
    },
    fail(result) {
      showPopup.statement = true;
    },
  });
  uni.request({
    url: "/tradeInfo",
    success({ data }: any) {
      tradeInfo.value = data;
      formData.price = data.refer_price;
    }
  });
});

const changePopup = (e: boolean, popupKey: keyof typeof showPopup) => {
  showPopup[popupKey] = e;
}

const closeStatement = () => {
  uni.setStorage({
    key: "showStatement",
    data: {
      value: false,
      validityDay: 1
    },
    success() {
      showPopup.statement = false;
    }
  });
}

const changePayOption = ({ detail }: any) => {
  formData.payOptions = detail.value.join(",");
}

const publishTrade = debounce(() => {
  const { price, number: num, payOptions: pay_type } = formData;
  // const { refer_price_min, refer_price_max, min_num } = tradeInfo.value;

  // if (+price > refer_price_max || +price < refer_price_min) {
  //   uni.showToast({ title: "输入单价须在指导价格区间以内", icon: "none" });
  //   return;
  // }

  // if (+num < min_num) {
  //   uni.showToast({ title: "输入数量不可低于最低买入数量", icon: "none" });
  //   return;
  // }

  if (!pay_type.includes(",")) {
    uni.showToast({ title: "请至少选择两种及以上付款方式", icon: "none" });
    return;
  }

  uni.request({
    url: "/tradeAdd",
    data: { price, num, pay_type },
    async success() {
      uni.showToast({ title: "发布成功!", duration: 1200, mask: true });
      await sleep(1.2);
      uni.navigateBack();
    }
  })
});

const confirmNumber = (e: any) => {
  formData.number = e[0][0].value;
  defaultSelector.value = e[1];
}

</script>
<style lang="scss">
page {
  background-color: $uni-bg-color-otc;
  color: $uni-text-color-otc;
}
</style>
<style lang="scss" scoped>
::v-deep {

  .uni-input-input:disabled,
  input[disabled] {
    color: $uni-color-primary-otc !important;
  }

  .u-select {
    .u-select__body {
      background-color: #101010;
    }


    .uni-picker-view-mask {
      background-image: linear-gradient(180deg, rgba(29, 29, 29, 0.95), rgba(29, 29, 29, 0.6)), linear-gradient(0deg, rgba(29, 29, 29, 0.95), rgba(29, 29, 29, 0.6));
    }

    .uni-picker-view-group {
      background-image: linear-gradient(180deg, rgba(29, 29, 29, 0.95), rgba(29, 29, 29, 0.6)), linear-gradient(0deg, rgba(29, 29, 29, 0.95), rgba(29, 29, 29, 0.6));
    }

    .uni-picker-view-content {
      background-color: #101010;
    }

    .u-select__body__picker-view__item {
      color: #fff;
    }

    .uni-picker-view-indicator {

      &::before,
      &::after {
        border-color: #1d1d1d;
      }
    }


    .u-select__header {
      background-color: #101010;
      font-size: 28rpx;

      &__title {
        color: #666;
      }
    }
  }


  checkbox {
    transform: scale(0.7);

    .wx-checkbox-input,
    .uni-checkbox-input {
      &:empty {
        border-color: #d9d9d9;
        background-color: transparent;
      }

      &:not(:empty) {
        border-color: $uni-color-primary-otc;
        background-color: $uni-color-primary-otc;
      }

      border-radius: 6rpx;
    }

    .wx-checkbox-input.wx-checkbox-input-checked,
    .uni-checkbox-input.uni-checkbox-input-checked {
      border-color: $uni-color-primary-otc;
      background-color: $uni-color-primary-otc;
    }

    &:not([disabled]) {

      .wx-checkbox-input:hover,
      .uni-checkbox-input:hover {
        border-color: $uni-color-primary-otc;
      }
    }
  }
}

.main {
  padding: 50rpx 30rpx 80px;
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
  border-radius: 32rpx 32rpx 0 0;
}

.footer {
  position: fixed;
  z-index: 99;
  bottom: 0;
  left: var(--window-left);
  right: var(--window-right);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>